<template>
	<view class="content">
		<view class="hader">
			<view class="hader_tit">Hot Video</view>
			<view class="hader_login" v-show="!userId" @tap="openPopup">Login</view>
		</view>
		<view class="main">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="Pullup"
			refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">
			<!-- refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" @refresherpulling="onPulling"
            @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" -->
				<view class="lists">
					<view class="lists_item" v-for="(item,index) in lists" :key="index" @tap="playDetails(item)">
						<view class="img_box">
							<image class="img" lazy-load="true" :src=item.coverImg></image>
							<view class="level_count">{{ item.collectCount }}集全</view>
						</view>
						<view class="title">{{ item.name }}</view>
						<view class="play_count">{{ item.viewCount }}万播放</view>
					</view>
				</view>		
				<view class="Loading">{{ showtext }}</view>
			</scroll-view>
		</view>
		<MailPopup ref="MailPopup"></MailPopup>
	</view>
</template>

<script>
	import MailPopup from '@/components/emailPopup/emailPopup.vue'
	import { getrequest, postrequest } from '../../util/api'
	export default { 
		data() {
			return {
				channelNo:'',
				triggered: false,  //下拉加载控制变量
				lists:[],// 首页的列表
				count:0, //总条数
				page:1, // 请求视频的页数
				userId:'', //用户的userId
				showLoading:false, //上拉加载控制值
				objectCount:0, //当前显示多少个电视剧
				showtext:'正在加载数据...',
			}
		},
		components: { MailPopup },
        async onLoad(option) {
			console.log('e',option)
			this.channelNo = option.channelNo
			this.userId = uni.getStorageSync('userId') || ''
			uni.setStorageSync('channelNo',option.channelNo);
					// 获取页面地址
			uni.setStorageSync('video_indexhref',window.location.href)
			// 请求视频
			await this.getvideo()

        },
		// 页面显示时触发
		onShow(){
		
		},
		// 页面初次渲染完成时触发。
		onReady(){

		},
		// 页面隐藏时触发。
		onHide(){

		},
		// 用户点击分享按钮或右上角菜单分享时触发。
		onShareAppMessage(){

		},
		// 页面卸载时触发。
		onUnload(){

		},
		methods: {
			openPopup() {
				this.$refs.MailPopup.open()
			},
			closePopup() {
				this.$refs.MailPopup.close()
			},
			// 请求首页的视频
			async getvideo(){
				let params = {
					page:this.page,
					size:10,
				}
				const res = await getrequest('/api/video/video_list',params)
				console.log('首页展示的列表',res.data.count)
				if(res.status == 200){
					this.lists = res.data.rows
					this.count =  res.data.count
				}
			},

			// 上拉加载
			async Pullup(){
				// 判断是否正在加载中，避免重复触发加载
				if (this.showLoading) {
					return;
				}
				// 显示加载中提示
				this.showLoading = true
					//   计算当前数组有多少对象
				this.objectCount = this.lists.filter(item => typeof item === 'object').length;
				//   如果已加载全部直接返回
				if( this.objectCount >= this.count){
					console.log("当前",this.count)
					this.showtext = '没有更多数据了...'
						setTimeout(()=>{
							// 隐藏加载中提示
							this.showLoading = false; 
						},2000)
					return
				}
				this.page ++

				let params = {
					page:this.page,
					size:10,
				}
				const res = await getrequest('/api/video/video_list',params)
				console.log('首页展示的列表',res.data.rows)
				if(res.status == 200){
					this.lists.push(...res.data.rows)
					this.showLoading = false
				}

			},
			// 跳转到播放详情页面
			playDetails(item){
				uni.setStorageSync('defvideo',JSON.stringify(item))
				uni.navigateTo({
					url: '/pages/play/play?videoId=' + item.id 
				});
			},
			// 自定义下拉刷新控件被下拉
			onPulling(e) {
                // console.log("自定义下拉刷新控件被下拉", e);
            },
			// 自定义下拉刷新被触发
            async onRefresh() {
				this.triggered = true;
				this.page = 1
				this.showtext = '正在加载数据...'
				await this.getvideo()
                setTimeout(() => {
                    this.triggered = false;
                }, 2000)
            },
			// 自定义下拉刷新被复位
            onRestore() {
                // this.triggered = 'restore'; 
                console.log("自定义下拉刷新被复位");
            },
			// 自定义下拉刷新被中止
            onAbort() {
                console.log("自定义下拉刷新被中止");
            }
		}
	} 
</script>

<style lang="scss">
	.content{
		width: 100vw;
		max-width: 750rpx;
		min-height: 100vh;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';

		.hader{
			width: 700rpx;
			height: 100rpx;
			margin: 0 auto;
			// border: 1px solid black;
			display: flex;
			justify-content: space-between;
			.hader_tit{
				width: 300rpx;
				height: 100rpx;
				font-size: 40rpx;
				font-weight: 500;
				line-height: 100rpx;
				color: rgba(0, 0, 0, 1);
			}
			.hader_login{
				width: 128rpx;
				height: 64rpx;
				font-size: 24rpx;
				margin: 18rpx 0 0 0;
				font-weight: 500;
				text-align: center;
				line-height: 64rpx;
				background: linear-gradient(270deg, rgba(96, 58, 245, 1) 0%, rgba(58, 107, 241, 1) 100%);
				border-radius: 10rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
		.main{
			width: 750rpx;
			height: calc(100vh - 110rpx);
			margin: 0 auto;
			margin-top: 10rpx;
			background-color: rgba(247, 249, 250, 1);
			.scroll-Y{
				width: 750rpx;
				height: calc(100vh - 110rpx);
				// border: 1px solid black;
				.lists{
					width: 700rpx;
					margin-left: 25rpx;
					display: grid;
					grid-template-columns: 1fr 1fr; /* 一行分成两列 */
					gap: 34rpx; /* 间距 */
					.lists_item{
						width: 335rpx;
						height: 320rpx;
						background-color: rgba(255, 255, 255, 1);
						.img_box{
							width: 335rpx;
							height: 190rpx;
							position: relative;
							// border: 1px solid black;
							.img{
								width: 335rpx;
								height: 190rpx;
								border-radius: 10rpx;
							}
							.level_count{
								width: 300rpx;
								height: 30rpx;
								// border: 1px solid black;
								position: absolute;
								top: 150rpx;
								left: 20rpx;
								z-index: 9;
								text-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.5);
								font-size: 22rpx;
								font-weight: 500;
								line-height: 30rpx;
								color: rgba(255, 255, 255, 1);
								text-align: right;


							}
						}
						.title{
							width: 312rpx;
							height: 70rpx;
							font-size: 26rpx;
							font-weight: 500;
							line-height: 35rpx;             
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: normal;
							color: rgba(12, 13, 15, 1);
							margin: 0 auto;
							margin-top: 10rpx;
						}
						.play_count{
							width: 320rpx;
							height: 30rpx;
							opacity: 0.7;
							font-size: 24rpx;
							line-height: 30rpx;
							color: rgba(96, 98, 102, 1);
							margin: 0 auto;
							margin-top: 10rpx;
						}
					}
				}
				.Loading{
					width: 750prx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 32rpx;
					background-color: rgb(227, 226, 226);
					color: black;
				}
			}
		}
	}

</style>
